<style lang="sass" scoped>
    .container{
        background: #f2f2f2;    
    }
    .top{
        background:url('../../assets/images/yd/yd_sl.png') no-repeat;
        height:248px;
        width:100%;
        background-size:100% 100%;
        padding:60px 0;
        .left{
            width:385px;
            padding-left:58px;
            flex-direction:column;
            justify-content: space-between;
            div{
                color:#fff;
            }
            .text{
                font-size:24px;
                height:22px;
                line-height:22px;
            }
            .min-cont{
                align-items:flex-end;
                .min1{
                    font-size:120px;
                    height:90px;
                    line-height:90px;
                    margin-left: -5px;
                }
                .min2{
                    font-size:34px;
                    height:32px;
                    line-height:32px;
                }
            }
        }
        .right{
            flex:1;
            flex-direction:column;
            justify-content: space-between;
            div{
                color:#fff;
                font-size:34px;
                height:32px;
                line-height:32px;
            }
        }
    }
    .list{
        .title{
            font-size:36px;
            color:#505050;
            padding:30px 0 20px;
            text-align:center;
        }
        .cont{
            background:#fff;
            border-radius:30px;
            width:700px;
            margin:0 auto;
            padding-bottom:10px;
            .group-title{
                padding:25px 0 15px;
                margin:0 30px 20px;
                display:flex;
                border-bottom:1px solid #e6e6e6;
                .group1{
                    width:105px;
                    padding-left:4px;
                }
                .group2{
                    flex:1;
                }
                .group3{
                    width:200px;
                    text-align:right;
                }
            }
            .group{
                display:flex;
                height:52px;
                align-items:center;
                margin-bottom:10px;
                padding-right:30px;
                &.red{
                    div{
                        color:#ff7373;
                    }
                }
                .group1{
                    width:135px;
                    text-align:center;
                    img{
                        display:block;
                        width:48px;
                        height:52px;
                        margin:0 auto;
                    }
                }
                .group2{
                    flex:1;
                }
                .group3{
                    width:200px;
                    text-align:right;
                }
            }
        }
        .book-cont{
            background:#fff;
            padding:25px 20px;
            border-radius:30px;
            width:700px;
            margin:0 auto;
            flex-wrap: wrap;
            .group{
                width:200px;
                min-width:200px;
                margin-bottom:20px;
                margin-right:30px;
                &:nth-child(3n){
                    margin-right:0;
                }
                img{
                    background:#000;
                    width:200px;
                    height:200px;
                    display:block;
                }
                .name{
                    font-size:28px;
                    height:26px;
                    line-height:26px;
                    margin-top:13px;
                }
                .count{
                    font-size:24px;
                    height:22px;
                    line-height:22px;
                    margin-top:5px;
                }
            }
        }
    }
</style>
<template>
    <div class="container">
        <div class="top flex">
            <div class="left flex">
                <div class="text">宝宝本周阅读时长</div>
                <div class="min-cont flex">
                    <div class="min1">{{info.currentWeekReadMin}}</div>
                    <div class="min2">分钟</div>
                </div>
            </div>
            <div class="right flex">
                <div class="text">上周阅读：{{info.lastWeekReadMin}}分钟</div>
                <div class="text">总共阅读：{{info.totalReadMin}}分钟</div>
                <div class="text">坚持阅读：{{info.readDay}}天</div>
            </div>
        </div>
        <div class="list">
            <div class="title">上周小读者排行榜</div>
            <div class="cont">
                <div class="group-title">
                    <div class="group1">名次</div>
                    <div class="group2">小读者</div>
                    <div class="group3">阅读时长</div>
                </div>
                <!-- <div class="group red">
                    <div class="group1">
                        <img src="../../assets/images/yd/yd_j.png" alt="">
                    </div>
                    <div class="group2">小读者</div>
                    <div class="group3">XXXX分钟</div>
                </div>
                <div class="group">
                    <div class="group1">
                        <img src="../../assets/images/yd/yd_y.png" alt="">
                    </div>
                    <div class="group2">小读者</div>
                    <div class="group3">XXXX分钟</div>
                </div>
                <div class="group">
                    <div class="group1">
                        <img src="../../assets/images/yd/yd_t.png" alt="">
                    </div>
                    <div class="group2">小读者</div>
                    <div class="group3">XXXX分钟</div>
                </div> -->
                <div v-if="!(i===0&&item.number<4)" v-for="(item,i) in userList" class="group" :class="{'red':i===0}">
                    <div class="group1">
                        <img v-if="item.number===1" src="../../assets/images/yd/yd_j.png" alt="">
                        <img v-if="item.number===2" src="../../assets/images/yd/yd_y.png" alt="">
                        <img v-if="item.number===3" src="../../assets/images/yd/yd_t.png" alt="">
                        <span v-if="item.number>3">{{item.number}}</span>
                    </div>
                    <div class="group2">{{item.userName}}</div>
                    <div class="group3">{{item.lastWeekReadMin}}分钟</div>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="title">上周图书热门榜</div>
            <div class="book-cont flex">
                <div v-for="(item,i) in bookList" class="group">
                    <img :src="item.bookIamgeUrl" alt="">
                    <div class="name">{{item.bookName}}</div>
                    <div class="count">{{item.readNumber}}次</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                info:{
                    currentWeekReadMin:'',//	int	本周阅读分钟数
                    lastWeekReadMin:'',//	string	上周阅读分钟数
                    totalReadMin:'',//	string	总阅读分钟数
                    readDay:'',//	int	阅读天数
                },
                userList:[],
                bookList:[],
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                $('body')[0].style.backgroundColor = '#f2f2f2';
                this.getReadDataOfUser();
                this.getUserReadDataTopList();
                this.getBookReadDataTopList();
            });
        },
        methods: {
            getReadDataOfUser(){
                let openid = util.getStorage('local','userinfo')?JSON.parse(util.getStorage('local','userinfo')).openid:'';
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/readData/getReadDataOfUser',
                    data:{
                        openId:openid
                    },
                    success:(data=>{
                        this.info = data.data;
                    })
                })
            },
            getUserReadDataTopList(){
                let openid = util.getStorage('local','userinfo')?JSON.parse(util.getStorage('local','userinfo')).openid:'';
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/readData/getUserReadDataTopList',
                    data:{
                        openId:openid
                    },
                    success:(data=>{
                        this.userList = data.data;
                    })
                })
            },
            getBookReadDataTopList(){
                let openid = util.getStorage('local','userinfo')?JSON.parse(util.getStorage('local','userinfo')).openid:'';
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/readData/getBookReadDataTopList',
                    data:{
                        openId:openid
                    },
                    success:(data=>{
                        this.bookList = data.data;
                    })
                })
            },
        },
        
    };
</script>